<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="浏览器缓存策略参考文章 123https:&#x2F;&#x2F;juejin.cn&#x2F;post&#x2F;6844903757872889870MDNhttps:&#x2F;&#x2F;juejin.cn&#x2F;post&#x2F;6844903737538920462    先说一下什么是缓存 12缓存就是会将一些不会经常更改的图片文件等资源存储下来，下次访问的时候会优先读取本地的资源进行显示，这样既能减轻服务器的负载，也能加快页面的显示。这时可能就可能会问，">
<meta property="og:type" content="article">
<meta property="og:title" content="浏览器缓存策略">
<meta property="og:url" content="http://tallgy.gitee.io/2021/10/22/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="浏览器缓存策略参考文章 123https:&#x2F;&#x2F;juejin.cn&#x2F;post&#x2F;6844903757872889870MDNhttps:&#x2F;&#x2F;juejin.cn&#x2F;post&#x2F;6844903737538920462    先说一下什么是缓存 12缓存就是会将一些不会经常更改的图片文件等资源存储下来，下次访问的时候会优先读取本地的资源进行显示，这样既能减轻服务器的负载，也能加快页面的显示。这时可能就可能会问，">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://tallgy.gitee.io/.io//image-20211023161739229.png">
<meta property="article:published_time" content="2021-10-22T13:43:10.000Z">
<meta property="article:modified_time" content="2023-06-25T08:57:29.354Z">
<meta property="article:author" content="tallgy">
<meta property="article:tag" content="随笔">
<meta property="article:tag" content="缓存策略">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://tallgy.gitee.io/.io//image-20211023161739229.png">


<link rel="canonical" href="http://tallgy.gitee.io/2021/10/22/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://tallgy.gitee.io/2021/10/22/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/","path":"2021/10/22/浏览器/浏览器缓存策略/","title":"浏览器缓存策略"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>浏览器缓存策略 | tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5"><span class="nav-number">1.</span> <span class="nav-text">浏览器缓存策略</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%BA%E7%BC%93%E5%AD%98"><span class="nav-number">1.1.</span> <span class="nav-text">强缓存</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%B7%E6%B1%82%E5%A4%B4"><span class="nav-number">1.1.1.</span> <span class="nav-text">请求头</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Expires"><span class="nav-number">1.1.1.1.</span> <span class="nav-text">Expires</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Cache-Control"><span class="nav-number">1.1.1.2.</span> <span class="nav-text">Cache-Control</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E5%BC%BA%E7%BC%93%E5%AD%98%E6%97%B6%E9%97%B4%E5%86%85%E5%A6%82%E4%BD%95%E6%9B%B4%E6%96%B0%E8%B5%84%E6%BA%90"><span class="nav-number">1.1.2.</span> <span class="nav-text">在强缓存时间内如何更新资源</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98"><span class="nav-number">1.2.</span> <span class="nav-text">协商缓存</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#If-Modified-Since-%E4%B8%8E-Last-Modified%EF%BC%9A"><span class="nav-number">1.2.1.</span> <span class="nav-text">If-Modified-Since 与  Last-Modified：</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Last-Modified%EF%BC%9A"><span class="nav-number">1.2.1.1.</span> <span class="nav-text">Last-Modified：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#If-Modified-Since%EF%BC%9A"><span class="nav-number">1.2.1.2.</span> <span class="nav-text">If-Modified-Since：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#If-None-Match-%E5%92%8C-ETag"><span class="nav-number">1.2.2.</span> <span class="nav-text">If-None-Match 和 ETag</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#ETag%EF%BC%9A"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">ETag：</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E7%A9%BA%E4%B8%AD%E7%A2%B0%E6%92%9E"><span class="nav-number">1.2.2.1.1.</span> <span class="nav-text">避免空中碰撞</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%BC%93%E5%AD%98%E6%9C%AA%E6%9B%B4%E6%94%B9%E7%9A%84%E8%B5%84%E6%BA%90"><span class="nav-number">1.2.2.1.2.</span> <span class="nav-text">缓存未更改的资源</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#If-None-Match%EF%BC%9A"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">If-None-Match：</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8E%E7%AB%AF%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F"><span class="nav-number">1.3.</span> <span class="nav-text">后端设置方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%80%E5%90%8E%EF%BC%8C%E9%87%8D%E6%96%B0%E6%9D%A5%E4%B8%80%E9%81%8D%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E8%BF%87%E7%A8%8B"><span class="nav-number">1.4.</span> <span class="nav-text">最后，重新来一遍浏览器缓存过程</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/22/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          浏览器缓存策略
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-22 21:43:10" itemprop="dateCreated datePublished" datetime="2021-10-22T21:43:10+08:00">2021-10-22</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="浏览器缓存策略"><a href="#浏览器缓存策略" class="headerlink" title="浏览器缓存策略"></a>浏览器缓存策略</h1><p><strong>参考文章</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">https://juejin.cn/post/6844903757872889870</span><br><span class="line">MDN</span><br><span class="line">https://juejin.cn/post/6844903737538920462</span><br></pre></td></tr></table></figure>



<p><strong>先说一下什么是缓存</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">缓存就是会将一些不会经常更改的图片文件等资源存储下来，下次访问的时候会优先读取本地的资源进行显示，这样既能减轻服务器的负载，也能加快页面的显示。</span><br><span class="line">这时可能就可能会问，那如果资源有了改变怎么办，所以这时候就有了强缓存和协商缓存两种。</span><br></pre></td></tr></table></figure>



<p><strong>浏览器缓存策略分为</strong></p>
<p>​    <strong>强缓存</strong></p>
<p>​        强缓存就是直接从本地进行读取，不需要向服务器端进行获取资源。因此很快。</p>
<p>​        在命中强缓存的情况下，状态码为 200，但是size显示from disk cache或from memory cache</p>
<p>​    <strong>协商缓存</strong></p>
<p>​        协商缓存就是会请求，但是会将一个文件的信息加入到请求头，然后服务器端进行判断，来决定是否要更新浏览器的资源。</p>
<p>​        会将 <code>Last-Modified</code> 和 <code>Etag</code> 放入请求头，然后服务器就会进行比对，如果命中协商缓存，状态码为304。否则会将资源传输过来。</p>
<h2 id="强缓存"><a href="#强缓存" class="headerlink" title="强缓存"></a>强缓存</h2><p>在进行请求的时候，不会向服务器发送请求，直接从缓存中读取资源，但是状态码是200</p>
<p>如何进行强缓存，简单来说就是我们请求资源之后，服务器会返回一个请求头。浏览器后续就会根据这个请求头进行判断是否命中强缓存。</p>
<h3 id="请求头"><a href="#请求头" class="headerlink" title="请求头"></a>请求头</h3><p>​        对于强缓存的请求头，有 <strong>Expires</strong> 和 <strong>Cache-Control</strong>，但是因为<strong>Cache-Control</strong> 是HTTP/1.1的产物，所以，优先级高于 Expires。</p>
<h4 id="Expires"><a href="#Expires" class="headerlink" title="Expires"></a>Expires</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Expires</span><br></pre></td></tr></table></figure>

<p>HTTP/1.0</p>
<p>​    缓存过期时间，用来指定资源到期的时间。</p>
<p>​        缺点，是通过本地时间进行的判断。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Expires: Wed, 21 Oct 2015 07:28:00 GMT</span><br></pre></td></tr></table></figure>

<p><strong>注：</strong></p>
<p>​    如果在<code>Cache-Contro</code>响应头设置了<code>max-age</code>或者<code>s-max-age</code>指令，那么<code>Expires</code>头会被忽悠。</p>
<h4 id="Cache-Control"><a href="#Cache-Control" class="headerlink" title="Cache-Control"></a>Cache-Control</h4><p>HTTP/1.1</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control</span><br></pre></td></tr></table></figure>

<p><strong>语法</strong>：</p>
<ul>
<li>不区分大小写，但建议使用小写。</li>
<li>多个指令以逗号分隔。</li>
<li>具有可选参数，可以用令牌或者带引号的字符串语法。</li>
</ul>
<p><strong>默认值：private</strong></p>
<p><strong>指令</strong>：</p>
<p><strong>可缓存性指令：</strong></p>
<p><strong>public：</strong></p>
<p>​        表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，即使是通常不可缓存的内容。</p>
<p>​        （例如：1.该响应没有<code>max-age</code>指令或<code>Expires</code>消息头；</p>
<p>​                        2. 该响应对应的请求方法是 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST">POST</a> 。）</p>
<p><strong>private：</strong></p>
<p>​        表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容。</p>
<p>​        比如：对应用户的本地浏览器。</p>
<p><strong>no-cache</strong>:</p>
<p>​        在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证(协商缓存验证)。</p>
<p><strong>no-store</strong>：</p>
<p>​        缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。</p>
<p><strong>到期：</strong></p>
<p><strong>max-age</strong>：</p>
<p>​        设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与<code>Expires</code>相反，时间是相对于请求的时间。</p>
<p><strong>s-maxage</strong>：</p>
<p>​        覆盖<code>max-age</code>或者<code>Expires</code>头，但是仅适用于共享缓存(比如各个代理)，私有缓存会忽略它。</p>
<p><strong>max-stale</strong>：</p>
<p>​        表明客户端愿意接收一个已经过期的资源。可以设置一个可选的秒数，表示响应不能已经过时超过该给定的时间。</p>
<p><strong>min-fresh</strong>：</p>
<p>​        表示客户端希望获取一个能在指定的秒数内保持其最新状态的响应。</p>
<p><strong>重新验证与加载：</strong></p>
<p><strong>must-revalidate</strong>：</p>
<p>​        一旦资源过期（比如已经超过<code>max-age</code>），在成功向原始服务器验证之前，缓存不能用该资源响应后续请求。</p>
<img src="/.io//image-20211023161739229.png" alt="image-20211023161739229" style="zoom:67%;">

<p>图片来源</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://juejin.cn/post/6844903757872889870</span><br></pre></td></tr></table></figure>



<p><strong>需要进行重新验证，这个就是会进行协商缓存：</strong></p>
<p>​        指定 <code>no-cache</code> 或 <code>max-age=0, must-revalidate</code> 表示客户端可以缓存资源，每次使用缓存资源前都必须重新验证其有效性。这意味着每次都会发起 HTTP 请求，但当缓存内容仍有效时可以跳过 HTTP 响应体的下载。</p>
<p><strong>注意：</strong></p>
<p>​    如果服务器关闭或失去连接，下面的指令可能会造成使用缓存。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Cache-Control: max-age=0</span><br></pre></td></tr></table></figure>



<h3 id="在强缓存时间内如何更新资源"><a href="#在强缓存时间内如何更新资源" class="headerlink" title="在强缓存时间内如何更新资源"></a>在强缓存时间内如何更新资源</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://juejin.cn/post/6844903737538920462#heading-5</span><br></pre></td></tr></table></figure>

<p>虽然强缓存很好，但是有一个问题，如果在强缓存时间内，我的文件资源发生了更新，那该怎么解决呢？<code>（这个是我面试的时候问到的，一下把我人问傻了。）</code></p>
<p>这里我后面去了解了：</p>
<p>​    简单来说就是对于资源文件需要在发生了改变之后，可以让客户端再请求一次，方法就是将文件的名字在每次修改之后会发生改变，所以每次修改了之后，客户端要请求的文件名发生了改变，就会重新再进行一次请求了。这里对于文件名的方式使用<code>hash</code>。</p>
<p>​    HTML：使用协商缓存，因为里面会存储资源文件的路径，在每次更新之后里面的路径需要修改，所以使用协商缓存更合理。</p>
<p>​    对于　CSS／JS／图片：使用强缓存，对于一个文件名带上一个 hash 值。在每次文件进行了修改之后，名字后面的hash就会发生改变。所以客户端就会重新请求。</p>
<h2 id="协商缓存"><a href="#协商缓存" class="headerlink" title="协商缓存"></a>协商缓存</h2><p>​        会在请求头加上：<code>If-None-Match</code>和<code>If-Modified-Since</code></p>
<p>​        分别对应了服务器响应头的：<code>ETag</code> 和  <code>Last-Modified</code></p>
<p>ETag 优先级高于 Last-Modified</p>
<h3 id="If-Modified-Since-与-Last-Modified："><a href="#If-Modified-Since-与-Last-Modified：" class="headerlink" title="If-Modified-Since 与  Last-Modified："></a><strong>If-Modified-Since</strong> 与  <strong>Last-Modified</strong>：</h3><p><strong>Last-Modified</strong>：</p>
<p>​    这个是服务器端的返回的响应头。</p>
<p><strong>If-Modified-Since</strong>：</p>
<p>​    这个是客户端的请求的请求头。</p>
<h4 id="Last-Modified："><a href="#Last-Modified：" class="headerlink" title="Last-Modified："></a><strong>Last-Modified</strong>：</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Last-Modified</span><br></pre></td></tr></table></figure>

<p>​        这个是根据上一次请求资源时，服务器所返回的<strong>Last-Modified</strong>，这个作为一个响应的头部。其中包含源头服务器认定的资源做出修改的日期及时间</p>
<p>​        包含有  <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/If-Modified-Since"><code>If-Modified-Since</code></a> 或 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/If-Unmodified-Since"><code>If-Unmodified-Since</code></a> 首部的条件请求会使用这个字段。 </p>
<h4 id="If-Modified-Since："><a href="#If-Modified-Since：" class="headerlink" title="If-Modified-Since："></a><strong>If-Modified-Since</strong>：</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/If-Modified-Since</span><br></pre></td></tr></table></figure>

<p>​        服务器只在所请求的资源在给定的日期时间之后对内容进行过修改的情况下才会将资源返回，状态码为 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/200"><code>200</code></a> 。</p>
<p>​        如果请求的资源从那时起未经修改，那么返回一个不带有消息主体的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/304"><code>304</code></a> 响应，而在 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Last-Modified"><code>Last-Modified</code></a> 首部中会带有上次修改时间。<strong>（注：虽然返回了304，但是会有last-modified的头部返回，因此浏览器下次请求时，会使用的是此时服务器端返回过来的last-modified，而不是以前的。）</strong></p>
<p>​        <code>If-Modified-Since</code> 只可以用在 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/GET"><code>GET</code></a> 或 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/HEAD"><code>HEAD</code></a> 请求中。</p>
<p>​        当与 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/If-None-Match"><code>If-None-Match</code></a> 一同出现时，它（**<code>If-Modified-Since</code>**）会被忽略掉，除非服务器不支持 <code>If-None-Match</code>。</p>
<p><strong>If-Unmodified-Since：</strong></p>
<p>​        这个我没有了解。</p>
<p><strong>使用上面这个的弊端：</strong></p>
<p>​        对于没有进行修改，但是有过保存导致 Last-Modified 被修改，无法命中。</p>
<p>​        这个只能以秒计时，所以对于秒以内的修改文件，不能返回。</p>
<h3 id="If-None-Match-和-ETag"><a href="#If-None-Match-和-ETag" class="headerlink" title="If-None-Match 和 ETag"></a>If-None-Match 和 ETag</h3><p><strong>ETag</strong>：</p>
<p>​    这个是服务器端的返回的响应头。</p>
<p><strong>If-None-Match</strong>：</p>
<p>​    这个是客户端的请求的请求头。</p>
<h4 id="ETag："><a href="#ETag：" class="headerlink" title="ETag："></a><strong>ETag</strong>：</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/ETag</span><br></pre></td></tr></table></figure>

<p>简单来说就是一个唯一标识资源的一个特殊符号，</p>
<p>通常计算方式是：</p>
<p>​    <strong>使用内容的散列，最后修改时间戳的哈希值，或简单地使用版本号</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">https://juejin.cn/post/6844903737538920462</span><br><span class="line">这里有将比较详细的计算方式，我这里就不做过多的说明。</span><br></pre></td></tr></table></figure>



<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ETag: &quot;33a64df551425fcc55e4d42a148795d9f25f89d4&quot;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">作用：</span><br><span class="line">	避免空中碰撞</span><br><span class="line">	缓存未更改的资源，就是304.</span><br></pre></td></tr></table></figure>



<h5 id="避免空中碰撞"><a href="#避免空中碰撞" class="headerlink" title="避免空中碰撞"></a>避免空中碰撞</h5><p>MDN上有说有这句话：</p>
<p>​    <strong>而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖（“空中碰撞”）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/ETag#避免“空中碰撞”</span><br></pre></td></tr></table></figure>

<p>大概的意思就是说，</p>
<p>​        我在客户端进行编辑共享文档时<code>（共享文档就是说可以被多人查看和编辑的）</code>，最开始拿到的文档是最新的。</p>
<p>​        但是在编辑的过程中，可能别人也有编辑，但是比我上传的早，所以，在我准备上传一个共享文档时，服务器端的文档已经被别人修改过了，但是此时我的客户端的文档因为没有重新进行请求，所以还是没有被修改过的，</p>
<p>​        此时如果没有先进行一次判断 ETag 值的话，就会发生相互覆盖，这个就是空中碰撞。</p>
<p>​        避免就是会先进行 ETag 匹配检查是否为最新版，否则报 412 前提条件失败错误。</p>
<p><code>（此时这个 ETag 会放在 If-Match 的请求头中。）</code></p>
<p><strong>注：</strong></p>
<p>​        如果给定URL中的资源更改，则一定要生成新的 Etag 值。 因此 Etags 类似于指纹，也可能被某些服务器用于跟踪。 比较 etags 能快速确定此资源是否变化，但也可能被跟踪服务器永久存留。<strong>（我能理解到 ETag 可能用于快速比较一个文件是否发生过修改，因为他是一个文根据文件的相关信息进行的一个算法生成的一个值，但是我不清楚什么是会被跟踪服务器存留）</strong></p>
<h5 id="缓存未更改的资源"><a href="#缓存未更改的资源" class="headerlink" title="缓存未更改的资源"></a>缓存未更改的资源</h5><p>​        对于用户访问一个URL时，显示了资源过期且不可用，客户端就发送 ETag 的值 作为 If-None-Match 的请求头，如果资源没有更改，那么服务器将会返回不带响应体的 304 状态。</p>
<h4 id="If-None-Match："><a href="#If-None-Match：" class="headerlink" title="If-None-Match："></a><strong>If-None-Match</strong>：</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/If-None-Match</span><br></pre></td></tr></table></figure>

<p><code>If-None-Match</code> 和 <code>If-Match</code> 的区别</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://datatracker.ietf.org/doc/html/rfc7232#section-3.1</span><br></pre></td></tr></table></figure>

<p>If-None-Match</p>
<p>​    使用的是 弱比较算法。</p>
<p>​    常用于 GET 请求的，请求最新资源的方式</p>
<p>If-Match</p>
<p>​    使用的是 强比较算法。</p>
<p>​    常用于 POST  PUT，DELETE 状态改变方法，防止多个用户同时操作的意外覆盖。</p>
<h2 id="后端设置方式"><a href="#后端设置方式" class="headerlink" title="后端设置方式"></a>后端设置方式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">参考文章</span><br><span class="line">https://juejin.cn/post/6844903737538920462#heading-11</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">res.setHeader(&#x27;Cache-Control&#x27;, &#x27;public, max-age=xxx&#x27;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">res.setHeader(&#x27;Cache-Control&#x27;, &#x27;public, max-age=0&#x27;);</span><br><span class="line">res.setHeader(&#x27;Last-Modified&#x27;, xxx);</span><br><span class="line">res.setHeader(&#x27;ETag&#x27;, xxx);</span><br></pre></td></tr></table></figure>





<h2 id="最后，重新来一遍浏览器缓存过程"><a href="#最后，重新来一遍浏览器缓存过程" class="headerlink" title="最后，重新来一遍浏览器缓存过程"></a>最后，重新来一遍浏览器缓存过程</h2><p><strong>第一次请求</strong></p>
<p>浏览器进行请求，发现缓存没有这个文件</p>
<p>向服务器进行请求，获得文件，并带上响应头：</p>
<p>​    属于强缓存的：Cache-Control，Expires</p>
<p>​    属于协商缓存的：ETag，Last-Modified</p>
<p>浏览器接收到了文件，并将文件和这些响应头缓存下来，下次使用。</p>
<p><strong>强缓存</strong></p>
<p>浏览器进行请求，发现缓存存在这个文件</p>
<p>浏览器缓存查看该次请求是否命中强缓存（就是没有超过文件缓存过期时间）</p>
<p>命中强缓存，直接从本地读取，状态码：200</p>
<p><strong>协商缓存</strong></p>
<p>浏览器进行请求，发现缓存存在这个文件</p>
<p>浏览器缓存查看该次请求是否命中强缓存，</p>
<p>没有命中强缓存，将 ETag 和 Last-Modified 的值放入请求头，</p>
<p>​    为 If-None-Match 和 If-Modified-Since，发送给服务器</p>
<p>服务器接收到请求后，查看是否命中协商缓存，</p>
<p>发现命中协商缓存，服务器会返回状态码 304，没有响应体</p>
<p>​    并将响应头的 Last-Modified 和 ETag 的值设置为文件的值，返回</p>
<p>客户端接收到服务器的 304 响应，并将 ETag 和 Last-Modified 存储下来。</p>
<p><strong>简单来说：</strong></p>
<p>​    就是第一次的文件请求会正常的返回，第二次会先看看能不能命中强缓存，如果能直接读取本地的，如果不能则看看能不能命中协商缓存，如果命中，则还是读取本地的文件，如果都没有命中，那么就会使用新的文件。</p>
<p>这里<strong>对于一个文件如何在强缓存期间进行更新</strong>也有说明：就是会对文件名进行hash计算，修改过的文件的hash值不一样，所以对于浏览器来说，这个文件名不一样，不是一个文件，需要重新请求。</p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E9%9A%8F%E7%AC%94/" rel="tag"># 随笔</a>
              <a href="/tags/%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/" rel="tag"># 缓存策略</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/10/21/HTML/%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="prev" title="块环境上下文(BFC)">
                  <i class="fa fa-chevron-left"></i> 块环境上下文(BFC)
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/10/23/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/HTTP%E6%A6%82%E8%BF%B0/" rel="next" title="HTTP概述">
                  HTTP概述 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
